<template>
  <div>
    <Menu></Menu>
    <el-card class="box-card" shadow="hover">
      <el-form ref="initStyle" :model="initStyle" label-width="80px">
        <el-collapse accordion>
          <el-collapse-item title="整体设置" name="1">
            <!-- <el-form-item label="标签数量">
              <el-input-number v-model="initStyle.num" :min="1" label="请输入标签数量"></el-input-number>
            </el-form-item> -->
            <el-form-item label="宽度">
              <el-slider v-model="initStyle.width" show-input :min="1" :max="500"></el-slider>
            </el-form-item>
            <el-form-item label="高度">
              <el-slider v-model="initStyle.height" show-input :min="1" :max="500"></el-slider>
            </el-form-item>
            <el-form-item label="边框宽度">
              <el-slider v-model="initStyle.borderWidth" show-input :min="1" :max="3" show-stops></el-slider>
            </el-form-item>
            <el-form-item label="边框类型">
              <el-select v-model="initStyle.borderStyle" placeholder="请选择边框类型" size="mini">
                <el-option value="solid" label="实线">
                </el-option>
                <el-option value="dashed" label="虚线">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="圆角">
              <el-slider v-model="initStyle.borderRadius" show-input :min="1"></el-slider>
            </el-form-item>
            <el-form-item label="辅助线">
              <el-switch v-model="initStyle.subline" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-collapse-item>
          <el-collapse-item title="文本内容" name="2">
            <el-timeline>
              <el-timeline-item v-for="(item,index) in initStyle.itemStyle" :key="item.id" placement="top">
                <el-card>
                  <el-form :model="item" label-width="80px" size="mini">
                    <el-form-item>
                      <i class="el-icon-delete" style="float: right;" @click="initStyle.itemStyle.splice(index,1)"></i>
                    </el-form-item>
                    <el-form-item label="类型">
                      <el-select v-model="item.type" placeholder="请选择类型" @change="changeType($event,item)">
                        <el-option label="文本" value="text"></el-option>
                        <el-option label="二维码" value="qrcode"></el-option>
                        <el-option label="图像" value="img"></el-option>
                      </el-select>
                    </el-form-item>
                    <template v-if="item.type === 'text'">
                      <el-form-item label="文本内容">
                        <el-input v-model="item.text" placeholder="请输入文本内容"></el-input>
                      </el-form-item>
                      <el-form-item label="字体">
                        <el-select v-model="item.fontFamily" placeholder="请选择字体">
                          <el-option label="宋体" value="宋体"></el-option>
                          <el-option label="微软雅黑" value="Microsoft YaHei"></el-option>
                          <el-option label="黑体" value="黑体"></el-option>
                          <el-option label="楷体" value="楷体"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="字体大小">
                        <el-slider v-model="item.fontSize" show-input :min="12" :max="80"></el-slider>
                      </el-form-item>
                      <el-form-item label="字符间距">
                        <el-slider v-model="item.letterSpacing" show-input :min="1" :max="80"></el-slider>
                      </el-form-item>
                      <el-form-item label="是否加粗">
                        <el-switch v-model="item.fontWeight" active-color="#13ce66" inactive-color="#ff4949" active-value="bold" inactive-value="normal">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="颜色">
                        <el-color-picker v-model="item.color"></el-color-picker>
                      </el-form-item>
                    </template>
                    <template v-else>
                      <el-form-item label="文本内容">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="item.text"></el-input>
                      </el-form-item>
                      <el-form-item label="调整宽高">
                        <el-slider v-model="item.width" show-input :min="1" :max="200"></el-slider>
                      </el-form-item>
                    </template>
                  </el-form>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
export default {
  name: 'Sidebar',
  props: {
    initStyle: {
      type: Object,
      required: true,
      default: {}
    },
    containerLeft: Number,
    containerTop: Number
  },
  data () {
    return {
      // // 标签位置
      // containerLeft: undefined,
      // containerTop: undefined
    }
  },
  mounted () {
    this.$bus.$on('addText', this.addText)
  },
  methods: {
    addText () {
      this.initStyle.itemStyle.push(
        {
          position: 'absolute',
          left: `${this.containerLeft}px`,
          top: `${this.containerTop}px`,
          id: uuidv4(),
          type: 'text',
          text: '',
          userSelect: 'none',

          color: '#000',
          fontSize: 20,
          letterSpacing: 1,
          fontWeight: 'normal',
          fontFamily: 'Microsoft YaHei'
        }
      )
    },
    changeType (type, item) {
      if (type === 'text') {
        this.$set(item, 'color', '#000')
        this.$set(item, 'fontSize', 16)
        this.$set(item, 'letterSpacing', 1)
        this.$set(item, 'fontWeight', 'normal')
        this.$set(item, 'fontFamily', 'Microsoft YaHei')

        delete item.width
      } else if (type === 'img') {
        delete item.color
        delete item.fontSize
        delete item.letterSpacing
        delete item.fontWeight
        delete item.fontFamily

        this.$set(item, 'width', 116)
      } else if (type === 'qrcode') {
        delete item.color
        delete item.fontSize
        delete item.letterSpacing
        delete item.fontWeight
        delete item.fontFamily

        this.$set(item, 'width', 116)
      }
    }
  }
}
</script>

<style scoped>
.el-card {
  margin-top: 6px;
}
.el-timeline {
  height: 80vh;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 0px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.el-icon-delete {
  cursor: pointer;
}
.el-icon-delete:hover {
  color: #f56c6c;
}
</style>
